<template>
    <div>
        <div class="p-5 mr-5">
            <el-form @submit.native.prevent="save" label-width="100px">
                <el-form-item label="标题：">
                    <el-input placeholder="请输入您的标题"></el-input>
                </el-form-item>
                <el-form-item label="图片：">
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-success="handlePictureCardPreview"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="类型：">
                    <el-select v-model="model.region" placeholder="请选择类型">
                        <el-option label="类型1" value="shanghai"></el-option>
                        <el-option label="类型2" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间：">
                    <el-col :span="5">
                        <el-date-picker type="date" placeholder="选择日期" v-model="model.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col style="textAlign:center;fontWeight:bold;fontSize:26px" :span="1">-</el-col>
                    <el-col :span="5">
                        <el-time-picker placeholder="选择时间" v-model="model.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="文章内容：">
                    <Vue-editor v-model="model.content" useCustomImageHandler @image-added="handleImageAdded"></Vue-editor>  
                </el-form-item>
                <el-form-item >
                    <el-button type="primary">确认提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang='ts'>
import { VueEditor } from "vue2-editor"
import { Component,Vue } from 'vue-property-decorator'
@Component({
    name:'contentEdit',
    components:{
        VueEditor
    }
})
export default class extends Vue{
    private dialogImageUrl = '' //存放上传的图片
    private dialogVisible = false
    private model = {
        
    }
    handlePictureCardPreview(){  //图片上传成功的事件
        console.log('图片上传成功的接口')
    }
    handleRemove(){  //图片删除成功的事件
        console.log('图片删除成功的接口')
    }

    handleImageAdded(){
        console.log(123)
    }
    // handleImageAdded(file:any, Editor:any, cursorLocation:any, resetUploader:any)=>{ //关于富文本图片上传事件
    //   let formData = new FormData();
    //   formData.append("image", file);
 
    //   axios({
    //     url: "https://fakeapi.yoursite.com/images",
    //     method: "POST",
    //     data: formData
    //   })
    //     .then(result => {
    //       let url = result.data.url; // Get url from response
    //       Editor.insertEmbed(cursorLocation, "image", url);
    //       resetUploader();
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
//   }
}
</script>

<style>

</style>